/**
 * @description  因子暴露度&&市值（归因分析）
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import { ThreeHeaderC, XYAxisChartsC, QuickQueryC } from '../../../../comps';
import style from '../index.less';
import _ from 'lodash';

class FactorExposure extends PureComponent {
  static defaultProps = {
    onRef: () => {}, // 本组件的引用
    workingType: 'default',
    title: '因子暴露度',
    type: 'style',
    height: '320px',
  };
  constructor() {
    super();
    this.state = {
      marketValue: [], // 市值echarts数据
      barraType: '0',
      type: '0', // 0-绝对，1-超额
      name: '', // 因子暴露度二级标题
      FactorExposure: { xAxis: [], timexAxis: [], series: [] },
    };
  }
  componentDidMount() {
    this.props.onRef(this);
    if (this.props.workingType == 'barra') {
      this.getData(this.props.args);
    }
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { args } = nextProps;
    if (JSON.stringify(args) !== JSON.stringify(this.props.args)) {
      this.setState({ FactorExposure: { xAxis: undefined, timexAxis: undefined, series: undefined } }, () => this.getData(args));
    }
  }
  // 获取数据
  getData = (args) => {
    const { dispatch, workingType, type } = this.props;
    const data = _.cloneDeep(args);
    data.type = this.state.type;
    console.log(this.state.barraType);
    if (workingType == 'barra' && this.state.barraType == '0') {
      delete data.flag;
      delete data.indexCode;
    }
    let url = 'attributionAnalysisM/getFactorExposure';
    if (workingType == 'barra') {
      if (type == 'style') {
        // 风格因子
        url = 'exposureAnalysisM/getFactorExposureStyle';
      } else {
        // 行业因子
        url = 'exposureAnalysisM/getFactorExposureIndustry';
      }
    }
    dispatch({
      type: url,
      payload: data,
      callback: (res) => {
        if (res) {
          this.setState({ FactorExposure: res });
          const series = res.series;
          const xAxis = res.xAxis;
          this.setMarketVaue(0, series, xAxis);
        } else {
          this.setState({ FactorExposure: { xAxis: [], timexAxis: [], series: [] } });
        }
      },
    });
  };

  // 设置市值数据
  setMarketVaue = (index, series, xAxis) => {
    if (series.length && xAxis.length) {
      const data = series[0].moreData;
      const name = xAxis[index];
      this.setState({
        marketValue: [{ name: name, data: data[index] }],
        name: name,
      });
    } else {
      this.setState({
        marketValue: [],
        name: '',
      });
    }
  };

  // 点击柱图事件
  clickData = (e) => {
    const { FactorExposure } = this.state;
    const series = FactorExposure.series;
    const xAxis = FactorExposure.xAxis;
    this.setMarketVaue(e.dataIndex, series, xAxis);
  };

  showCharts = () => {
    // 因子暴露度
    const { height } = this.props;
    const { FactorExposure } = this.state;
    const xAxis = FactorExposure.xAxis;
    const series = FactorExposure.series;
    return (
      <div style={{ height: height }} className='echarts1'>
        <XYAxisChartsC series={series} xAxis={xAxis} height={height} click={(e) => this.clickData(e)} lableRotate={30} type='bar' isClickGrid={true} />
      </div>
    );
  };

  // 按钮切换事件
  onChangeRadio = (e) => {
    if (e) {
      this.setState(
        {
          type: e,
          FactorExposure: { xAxis: undefined, timexAxis: undefined, series: undefined },
          barraType: e,
        },
        () => {
          this.getData(this.props.args);
        },
      );
    }
  };

  showMarketECharts = () => {
    // 市值
    const { height, workingType } = this.props;
    const { marketValue, FactorExposure } = this.state;
    const xAxis = FactorExposure.timexAxis;
    const series = marketValue;
    if (workingType == 'barra') {
      series.push({ name: '', data: [] });
    }
    return (
      <div style={{ height: height, marginTop: workingType == 'barra' ? 0 : '26px' }} className='echarts2'>
        <XYAxisChartsC xAxis={xAxis} series={series} height={height} dataZoom={true} width='100%' />
      </div>
    );
  };

  render() {
    const { workingType, title, type } = this.props;
    return (
      <div className={style.showECharts}>
        <Row>
          {workingType == 'barra' ? (
            <Col span={12} style={{ paddingRight: '8px' }}>
              <ThreeHeaderC title={title} />
              <div style={{ marginTop: '10px' }}>{this.showCharts(type)}</div>
            </Col>
          ) : (
            <Col span={12} style={{ paddingRight: '8px' }}>
              <ThreeHeaderC
                title='因子暴露度'
                Right={
                  <QuickQueryC
                    dataSource={[
                      { value: '0', title: '绝对' },
                      { value: '1', title: '超额' },
                    ]}
                    initialValue={'0'}
                    onChange={(e) => this.onChangeRadio(e)}
                  />
                }
              />
              <div style={{ marginTop: '10px' }}>{this.showCharts()}</div>
            </Col>
          )}
          <Col span={12} style={{ paddingLeft: '8px' }}>
            <ThreeHeaderC title={workingType == 'barra' ? (type == 'style' ? '单个风格因子暴露度走势' : '单个行业因子暴露度走势') : this.state.name} />
            {this.showMarketECharts()}
          </Col>
        </Row>
      </div>
    );
  }
}
export default connect(({ attributionAnalysisM, exposureAnalysisM }) => ({ attributionAnalysisM, exposureAnalysisM }))(FactorExposure);
